<template>
  <div>
    <bread isList></bread>
    <div class="imgtop">
      <img src="../../assets/images/demand.png" alt="">
      <div class="title">
        <div style="color: #0078FE;margin-bottom: 10px;">WISH   LIST</div>
        <div>定制服务需求</div>
      </div>
    </div>
    <div class="table">
      <a-table class="tablebox" :loading="tableLoading" rowKey="id" :dataSource="source" :columns="columns" :scroll="{ x: 1000 }" :pagination="false" >
        <a slot="name" slot-scope="text, record" :title="text" @click="toDetail(record.id)">{{ text }}</a>
      </a-table>
      <paging style="margin-top: 20px;" :total="paging.total" @pageChange="handlePageChange" :current="paging.page" :defaultPageSize="paging.limit" />
    </div>
  </div>
</template>

<script>
import Top from '@/components/base/Top'
import MallHeader from '@/components/base/MallHeader'
import Paging from '@/components/base/Paging'
import MallFooter from '@/components/base/MallFooter'
import bread from './components/Bread'
import {tableMixin, roleMixin, pageMixin} from '@/mixins'
import {demandPage} from '@/api/demand'
import storage from '@/utils/storage'
export default {
  name: 'goodsList',
  mixins: [ tableMixin, pageMixin ],
  components: { Top, bread, MallHeader, Paging, MallFooter },
  data () {
    return {
      dtype:{
        '01': '数据产品',
        '02': '数据服务',
        '03': '数据工具',
        '09': '其他',
      },
      columns:[
        {
          title: '需求标题',
          dataIndex: 'title',
          ellipsis: true,
          scopedSlots: { customRender: 'name' },
          width: 200
        },
        {
          title: '需求编号',
          dataIndex: 'demandNo',
          width: 170
        },
        {
          title: '预算资金',
          dataIndex: 'financeBudget',
          customRender: t=> t ? `￥${(t||0).toFixed(2)}万元` : '面议',
          width: 140
        },
        {
          title: '需求类型',
          dataIndex: 'demandType',
          width: 100,
          customRender: t=> this.dtype[t]
        },
        {
          title: '需求单位',
          dataIndex: 'deptName',
          ellipsis: true,
          width: 200,
        },
        {
          title: '响应截止时间',
          dataIndex: 'responseDeadline',
          width: 170,
        },
        {
          title: '发布时间',
          dataIndex: 'createTime',
          width: 170
        }
      ],
      source:[]
    }
  },
  created () {
    if (!storage.session.get('authToken') || !storage.session.get('isLogin')) {
      this.$message.error('请登录')
      return this.toGldPath('loginUrl')
    }
    this.loadData()
  },
  methods: {
    // async toLogin () {
    //   const token = storage.session.get('gldToken')
    //   let logout = gt =>{
    //     this.removeAll()
    //     if(!gt)storage.session.remove('gldToken')
    //     this.toGldPath('loginUrl')
    //   }
    //   if(!token)return logout(1)
    //   try{
    //     await ssoLogout({token})
    //   }catch(e){

    //   }
    //   logout()
    // },
    async loadData () {
      this.tableLoading = true
      let { limit, page } = this.paging
      let res = await demandPage({ limit, page })
      this.tableLoading = false
      let { records, total } = res.data || {}
      this.source = records;
      this.paging.total = +(total || 0)
    },
    handlePageChange (page, limit) {
      this.paging.page = page
      this.paging.limit = limit
      this.loadData()
    },
    toDetail(demandId){
      this.$router.push({
        path: '/demand/detail',
        query: {demandId}
      })
    }
  }
}
</script>

<style scoped lang="scss">
$width: 1200px;
$mainColor: #0078FE;
.w1200 {
  width: $width;
  margin: 0 auto;
}

.imgtop{
  position: relative;
  @extend .w1200 ;
  height: 188px;
  .title{
    position: absolute;
    display: flex;
    top: 0;
    bottom: 0;
    z-index: 9;
    width: 100%;
    font-size: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  img{
    width: 100%;
    height: 100%;
  }
}
.table{
  @extend .w1200 ;
  margin-top: 20px;
}
.tablebox{
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}

/deep/ .ant-table-thead > tr > th{
  background-color: #0f7cf6;
  color: #fff;
  line-height: 28px;
  &:first-child{
    // text-align: center;
    padding-left: 30px;
  }
}


</style>
